<template>
	<view class="content">
		<view class="loadBox" v-show="!load">
			<view class="r_out animation-slide-bottom" :style="[{animationDelay:(0.5)+'s'}]">
				<view class="r_in">
					<view class="r_c c1" :style="{height:progress_load+'%'}">

					</view>
					<view class="r_num">
						{{progress_load}}%
					</view>

				</view>
			</view>
		</view>

		<image class="imgBox" :src="tempFilePath" v-show="load" mode="aspectFill"></image>


		<view class="foot">

			<button class="button_jump animation-slide-bottom" :style="[{animationDelay:(2)+'s'}]" @click="jump_to">
				跳过
			</button>
		</view>

	</view>
</template>
<script>
	export default {
		name: "FirstPage",
		data() {
			return {
				title: '正在加载中',
				arr: [],
				showImg: 1000,
				load: false,
				progress_load: 0,
				num: 0,
				tempFilePath: "",
				audio: uni.createInnerAudioContext(), //创建音频
				imgSrc: "../../static/2021321/1000.jpg",
			}
		},
		onLoad() {
			this.title = "加载完成";
		},
		onReady() {
			this.audio.src = "../../static/1.mp3";
			this.doanLoad();
			window.addEventListener('resize', () => {
				location.reload();
			});

		},
		methods: {
			doanLoad() {
				let gifArr = {
					src: "http://192.168.3.227/images/1.gif",
					src1: "http://192.168.3.227/images/2.gif"
				}
				if (this.deviceWidth >= 768) {
					gifArr.src = gifArr.src1;
				}

				let downloadTask = uni.downloadFile({
					url: gifArr.src, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							this.load = true;
							this.playAudio();
							this.tempFilePath = res.tempFilePath;
						}
					}
				});
				downloadTask.onProgressUpdate((res) => {
					this.progress_load = parseInt((res.totalBytesWritten / res.totalBytesExpectedToWrite) * 100);
					console.log('下载进度' + res.progress);
					console.log('已经下载的数据长度' + res.totalBytesWritten);
					console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);

					// 测试条件，取消下载任务。

				});

			},

			/**
			 * 图片资源的加载进度的监听
			 * @param {Object} index 加载图片的数量
			 */
			loadImg() {
				this.num++;
				this.load = true;
				this.playAudio();

			},
			/**
			 * 加载动画效果
			 */
			loadDonghua() {
				this.playAudio();
				let model_TIMER = false;
				let speed = 160;

				let update = () => {
					if (this.showImg == 1448) {

						return false;
					}
					this.showImg++;
					setTimeout(update, 10);
				}
			

			},
			/**
			 * 播放音频
			 */
			playAudio() {
				console.log("播放音频");
				this.audio.play();
			},
			/**
			 * 跳过
			 * 进入首页
			 */
			jump_to() {

			}


		}
	}
</script>

<style>
	/**
	 * 关于平板的适配
	 */
	@media screen and (min-width:768px) and (max-width:1024px) {

		.imgBox {
			width: 100vw;
			height: 100vh;



		}


		.logo {
			height: 200rpx;
			width: 200rpx;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}

		.text-area {
			display: flex;
			justify-content: center;
		}

		.title {
			font-size: 36rpx;
			color: #8f8f94;
		}

		.foot {
			width: 100vw;
			height: 100rpx;
			position: absolute;
			z-index: 999;
			bottom: 5vh;

		}

		.button_jump {
			width: 30%;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3.5vw;
			margin-top: 10rpx;
			background-color: red;
			border-radius: 10rpx;
			color: white;

		}

		button.action::after {
			border: 0;
		}



		.loadBox {
			width: 100%;
			height: 90vh;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.roundBox {
			width: 40vw;
			height: 40vw;
			border: 1px solid red;
			border-radius: 50%;
			line-height: 40vw;
			text-align: center;
			font-size: 5vw;
			color: red;
			font-weight: 600;
		}

		.r_out {
			width: 25vw;
			height: 25vw;
			border: 8rpx solid #d9d9d9;
			border-radius: 50%;
			background: #fff;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.r_in {
			width: 22vw;
			height: 22vw;
			border-radius: 50%;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			-ms_border-radius: 50%;
			overflow: hidden;
			position: relative;
		}

		.r_c {
			width: 22vw;
			height: 22vw;
			position: absolute;
			bottom: 0;
			left: 0;
			height: 0;
		}

		.c1 {

			background: #fbad4c;
		}

		.r_num {
			color: #404040;
			font-size: 6vw;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			position: absolute;
			height: 22vw;
			text-align: center;
			width: 100%;
		}


	}

	/**
	 * 关于普通安卓设备
	 */
	@media screen and (max-width:768px) {

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.imgBox {
			width: 100vw;
			height: 100vh;

		}

		@keyframes fade {
			0% {
				opacity: 0
			}

			100% {
				opacity: 1
			}
		}

		.animation-fade {
			animation-name: fade;
			animation-duration: .8s;
			animation-timing-function: linear
		}

		.logo {
			height: 200rpx;
			width: 200rpx;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}

		.text-area {
			display: flex;
			justify-content: center;
		}

		.title {
			font-size: 36rpx;
			color: #8f8f94;
		}

		.foot {
			width: 100vw;
			height: 100rpx;
			position: absolute;
			z-index: 999;
			bottom: 5vh;

		}

		.button_jump {
			width: 40%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 5vw;
			margin-top: 10rpx;
			background-color: red;
			border-radius: 10rpx;
			color: white;

		}

		button.action::after {
			border: 0;
		}

		.loadBox {
			width: 100%;
			height: 90vh;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.roundBox {
			width: 40vw;
			height: 40vw;
			border: 1px solid red;
			border-radius: 50%;
			line-height: 40vw;
			text-align: center;
			font-size: 5vw;
			color: red;
			font-weight: 600;
		}

		.r_out {
			width: 25vw;
			height: 25vw;
			border: 8rpx solid #d9d9d9;
			border-radius: 50%;
			background: #fff;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.r_in {
			width: 22vw;
			height: 22vw;
			border-radius: 50%;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			-ms_border-radius: 50%;
			overflow: hidden;
			position: relative;
		}

		.r_c {
			width: 22vw;
			height: 22vw;
			position: absolute;
			bottom: 0;
			left: 0;
			height: 0;
		}

		.c1 {

			background: #fbad4c;
		}

		.r_num {
			color: #404040;
			font-size: 6vw;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			position: absolute;
			height: 22vw;
			text-align: center;
			width: 100%;
		}
	}


	/**
	 * 关于横屏
	 */
	@media screen and (min-width:1024px) {

		.imgBox {
			width: 100vw;
			height: 90vh;


		}

		.logo {
			height: 200rpx;
			width: 200rpx;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}

		.foot {
			width: 100vw;
			height: 100rpx;
			position: absolute;
			z-index: 999;
			bottom: 5vh;

		}

		.button_jump {
			width: 20%;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 2vw;
			margin-top: 10rpx;
			background-color: red;
			border-radius: 10rpx;
			color: white;

		}

		button.action::after {
			border: 0;
		}



		.loadBox {
			width: 100%;
			height: 90vh;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.roundBox {
			width: 40vw;
			height: 40vw;
			border: 1px solid red;
			border-radius: 50%;
			line-height: 40vw;
			text-align: center;
			font-size: 5vw;
			color: red;
			font-weight: 600;
		}

		.r_out {
			width: 25vw;
			height: 25vw;
			border: 8rpx solid #d9d9d9;
			border-radius: 50%;
			background: #fff;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.r_in {
			width: 22vw;
			height: 22vw;
			border-radius: 50%;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			-ms_border-radius: 50%;
			overflow: hidden;
			position: relative;
		}

		.r_c {
			width: 22vw;
			height: 22vw;
			position: absolute;
			bottom: 0;
			left: 0;
			height: 0;
		}

		.c1 {

			background: #fbad4c;
		}

		.r_num {
			color: #404040;
			font-size: 6vw;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			position: absolute;
			height: 22vw;
			text-align: center;
			width: 100%;
		}


	}

	/**
	 * 公共文件样式
	 */
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #1B151B;
		width: 100vw;
		height: 100vh;
	}

	@keyframes fade {
		0% {
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	.animation-fade {
		animation-name: fade;
		animation-duration: .8s;
		animation-timing-function: linear
	}

	[class*=animation-] {
		animation-duration: .5s;
		animation-timing-function: ease-out;
		animation-fill-mode: both
	}
</style>
